<template>
  <van-loading v-if="isLoading" size="18" type="spinner" />
  <van-icon
    v-else
    :color="isZan ===1 ? '#3296fa' : '#777'"
    :name="isZan ===1? 'good-job' : 'good-job-o'"
    @click="collect"
  />
</template>
<script>
import { addArticleZan, deleteArticleZan } from "@/api/article";
export default {
  name: "CollectArticle",
  props: {
    //   文章是否被点赞
    isZan: {
      type: Number,
      require: true,
    },
    // 文章id 
    articleId: {
      type: [String, Number],
      require: true,
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async collect() {
      if (!this.$store.getters.token) return this.$toast("请登录!");

      this.isLoading = true;

      try {
        if (this.isZan===1) {
          await deleteArticleZan(this.articleId);
        } else {
          await addArticleZan({
             target: this.articleId
          });
        }
        const newZan=this.isZan ===1 ? 0 : 1
        this.$emit("update:isZan", newZan);
        this.$toast.success("操作成功!");
      } catch (error) {
        console.log(error);
        this.$toast.fail("操作失败!");
      }
      this.isLoading = false;
    },
  },
  created() {},
};
</script>
<style scoped lang="less">
</style>